import React, { Component } from 'react';
import echarts from 'echarts'

class DataChart extends Component {
  constructor(props) {
    super(props);

    this.wrapperResize = this.wrapperResize.bind(this)
    this.resizeHandle = this.resizeHandle.bind(this)
    this.drawChart = this.drawChart.bind(this)
  }

  wrapperResize () {
    this.chart.style.width = window.innerWidth + 'px'
    this.chart.style.height = window.innerHeight / 2 + 'px'
  }
  resizeHandle () {
    this.wrapperResize()
    this.chart.resize()
  }
  drawChart () {
    this.wrapperResize()
    this.chart = echarts.init(this.chart)
    let series = [
      {
        name: `${this.props.desc}增长`,
        sum: this.props.series[0].map(v => v.newestNetvalue),
        sumPct: this.props.series[0].map(v => v.newestNetvalue)
      },
      {
        name: `增长`,
        sum: this.props.series[0].map(v => v.newestNetvalue),
        sumPct: this.props.series[0].map(v => v.newestNetvalue)
      }
    ]
    let options = {
      title: {
        left: 'left',
        text: `${this.props.desc}净值走势图`
      },
      dataZoom: [
        {
          type: 'slider',
          realtime: false,
          handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
          start: 80,
          end: 100
        },
        {
          type: 'slider',
          realtime: false,
          handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
          handleSize: '80%',
          handleStyle: {
            color: '#fff',
            shadowBlur: 3,
            shadowColor: 'rgba(0, 0, 0, 0.6)',
            shadowOffsetX: 2,
            shadowOffsetY: 2
          }
        }
      ],
      tooltip: {
        trigger: 'axis',
        triggerOn: 'click',
        formatter: (params, ticket, callback) => {
          return ``
        }
      },
      legend: {
        top: '28',
        textStyle: {
          fontSize: 15
        },
        itemWidth: 30,
        itemHeight: 18,
        data: [series[0].name, series[1].name]
      },
      grid: {
        zlevel: 0,
        z: 10,
        width: '71%',
        left: '15%',
        bottom: 80,
        borderWidth: 0
      },
      xAxis: [
        {
          type: 'time',
          axisLabel: {
            textStyle: {
              fontSize: 8
            }
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          scale: true,
          precision: 1,
          splitNumber: 8,
          splitArea: {
            show: true
          },
          axisLabel: {
            formatter: value => {
              if (Math.abs(value) >= 10000) { return `${value.toExponential(1)}%` }
              return `${value}%`
            },
            textStyle: {
              fontSize: 8
            }
          }
        }
      ],
      series: [
        {
          name: series[0].name,
          type: 'line',
          smooth: true,
          symbol: 'none',
          sampling: 'average',
          data: series[0].sumPct,
          itemStyle: {
            normal: {
              color: '#d11d51'
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgb(255, 158, 68)'
              }, {
                offset: 1,
                color: '#d11d51'
              }])
            }
          }
        },
        {
          name: series[1].name,
          type: 'line',
          smooth: true,
          symbol: 'none',
          sampling: 'average',
          data: series[1].sumPct,
          itemStyle: {
            normal: {
              color: '#182346'
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#432e60'
              }, {
                offset: 1,
                color: '#182346'
              }])
            }
          }
        }
      ]
    }
    this.chart.setOption(options)
  }
  componentDidMount() {
    window.addEventListener('resize', this.resizeHandle)
  }
  componentDidUpdate() {
    this.drawChart()
  }
  componentWillUnmount() {
    window.removeEventListener('resize', this.resizeHandle)
  }
  render () {
    return (
      <div className="dataChart">
        <div className="chart" ref={elm => {this.chart = elm}}></div>
      </div>
    )
  }
}

export default DataChart;